<template>
    <div class="container">
        <van-nav-bar fixed class="van-admin" >
           <template #left>
            <div class="header-left">
             <div @click="$router.back()" class="icon-admin">
               <van-icon style="margin-top:1.6vw" color="#fff" size="20" name="arrow-left" />
             </div>
             <div class="context">
              <span style="color:#333">{{list.name}}</span>
              <div style="margin-top:-2.7vw">
                <van-rate   color="#ec3814"
                 void-icon="star"
                 allow-half
                  void-color="#eee" :size="10"
                   v-model="value" readonly />
                   <span class="rate-scor">{{list.score}}</span>
              </div>
             </div>
            </div>
          </template>
          <template #right>
            <div class="header-right">
              <van-button  @click="wantLock"  :color="bgcBtn" round size="small" type="info">
                <template #default>
                  <div v-if="clickBtn">
                    <van-icon color="#fff" name="like" />
                    &nbsp;
                    <span>想看</span>
                  </div>
                   <div v-else>
                    <span style="margin-left:1.85vw;margin-right:1.9vw" >已想看</span>
                  </div>
                </template>
              </van-button>
            </div>
          </template>
        </van-nav-bar>
        <!-- 主体内容 -->
        <div class="cneter1">
          <div class="center1-lefet">
            <img :src="list.img" alt="">
          </div>
          <div class="center1-right">
            <div class="center1-name">
              <span>{{list.name}}</span>
            </div>
            <span class="commonspan-name">{{list.name}}</span>
            <span class="commonspan1" v-for="ele in list.tag" :key="ele">{{ele}}</span>
            <span class="commonspan2">{{list.time}}</span>
            <div class="center-btn">
                <van-button @click="wantLock" square size="small" color="#f1f1f2" type="info" >
                  <template #default>
                      <div class="btn-admin-common">
                          <div v-if="clickBtn">
                          <van-icon color="#bcc2c9" name="like" />
                          <span  style="color:#333">想看</span>
                      </div>
                          <div v-else>
                            <span  style="color:#333">已想看</span>
                          </div>
                      </div>
                  </template>
                </van-button>
                <van-button @click="defaultToast" square  size="small" color="#f1f1f2" >
                  <template #default>
                      <div class="btn-admin-common">
                         <van-icon color="#bcc2c9" name="star" />
                         <span style="color:#333">看过</span>
                      </div>
                  </template>
                </van-button>
            </div>
          </div>
        </div>
        <!-- 淘票票评分 -->
        <div class="center2">
          <div style="       letter-spacing: 0.2vw;
          ;margin-top:1vw;font-size:3.3vw;color:#999">
            <van-icon color="rgb(213, 84, 84)" name="smile-o" />
          <span>淘票票购票评分</span>
          </div>
          <div v-if="list.flag" class="center2-center">
            <div class="centert-left">
              <div class="center2-score">
                {{list.score}}
              </div>
              <div class="center2-people">
                   {{list.commentPeople}}
              </div>
            </div>
            <div class="center2-right">
              <div class="center-right-center" v-for="(ele,index) in ratelist" :key="index">
                  <div class="aadmin-rate">
                    <van-rate
                      v-model="ele.rate"
                      :size="6"
                      color="#eee"
                      void-icon="star"
                      void-color="#ffd21e"
                    />
                </div>
                <div class="admin-pro">
                  <van-progress style="margin-top:3vw" color="#f2826a" :show-pivot="false" :percentage="ele.score" />
                </div>
              </div>
            </div>
          </div>
          <div v-else></div>
          <div v-if="list.flag" class="center2-foot">
             <div class="foot-span">
              <span>{{list.number}}</span>
              <span style="font-size:2.7vw;color:#999">人想看</span>
             </div>
             <div class="foot-span">
              <span>{{list.lokepeople}}</span>
              <span style="font-size:2.7vw;color:#999">人看过</span>
             </div>
             <div  @click="defaultToast" style="padding-top:1vw;margin-left:25vw">
              <van-icon name="arrow" />
             </div>
            </div>
            <div v-else class="want">
               <div class="center2-people">
                   尚未上映
              </div>
              <div class="wantlright">
                <span style="font-size:8vw;color: rgb(244, 138, 16)">{{list.number2}}</span>
              <span>人想看</span>
              </div>
            </div>
        </div>

        <!-- 剧情介绍 -->
        <div class="center">
            <h4 style="margin:1.5vw 0;">剧情介绍</h4>
            <div class="introduce">{{list.introduce}}</div>
        </div>
        <!-- 演员介绍 -->
        <MoviePeople :actor="list.actor"></MoviePeople>
        <!-- 观众评论 -->
        <div class="center3">
          <div class="center-header">
            <h4>观众影评</h4>
            <van-button @click="remarkcomment(list.name)" round  size="small" >
              <template #default>
                <van-icon name="records" size="15" />
                写影评
                <van-rate :size="10" :v-model="5" disabled />
              </template>
            </van-button>
          </div>
          <!-- 评论内容 -->
            <commentlist :comment="list.comment"></commentlist>
        </div>
        <!-- 弹框组件 -->
        <van-dialog
          :showConfirmButton = "false"
          v-model="showDialog"
          :width="300"
        >
         <div class="showDialog">
          <span>想看的电影已记录到我的淘票票时光</span>
         </div>
      </van-dialog>
    </div>
</template>

<script>
import commentlist from '@/components/ComentList.vue'
import MoviePeople from '@/components/MoviePeople.vue'
import { getDetailInfo } from '@/api/detail'
export default {
  name: 'DetailPage',
  components: {
    MoviePeople,
    commentlist
  },
  data () {
    return {
      ratelist: [
        { rate: 0, score: 99 }, { rate: 1, score: 13 }, { rate: 2, score: 3 }, { rate: 3, score: 0 }, { rate: 4, score: 5 }
      ],
      list: {}, // 数据
      clickBtn: true, // 按钮点击
      value: 5,
      showDialog: false,
      bgcBtn: '#565a62' // 想看背景颜色
    }
  },
  methods: {
    remarkcomment (value) {
      if (!this.$store.getters.token) {
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: '此时需要先登录才能继续操作'
          })
          .then(() => {
            this.$router.replace({
              path: '/login',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
          .catch(() => {})
      } else {
        this.$router.push(`/remark?MovieName=${value}`)
      }
    },
    // 默认统一弹框，开发中
    defaultToast () {
      this.$toast({
        message: '该功能正在开发中',
        icon: 'https://img01.yzcdn.cn/vant/logo.png',
        duration: 1000
      })
    },
    // 想看电影
    wantLock () {
      this.clickBtn = !this.clickBtn
      this.bgcBtn = this.clickBtn ? '#565a62' : 'red '
      if (!this.clickBtn) {
        this.showDialog = true
        setTimeout(() => {
          this.showDialog = false
        }, 1300)
      }
    }
  },
  computed: {
    // 获取地址url的关键字
    querySearch () {
      return this.$route.query.name
    }
  },
  created () {
    const res = getDetailInfo(this.querySearch)
    this.list = res
  },
  mounted () {
    // 使页面滚动到顶部
    window.scrollTo(0, 0) // 滚动到页面顶部
  }
}
</script>

<style lang="less" scoped>
.want{
  display: flex;
  justify-content:space-between;
  height: 15vw;
  padding: 0 8vw;
   padding-top: 6vw;
  .wantlright{
    margin-top: -2vw;
    width: 60%;
  }
}
.fixed-header{
  position: fixed;
  z-index: 9999;
}
.center{
    margin: 0 auto;
    padding: 1vw 3vw;
    border-radius: 2vw;
    width: 91%;
    margin-top: 4vw;
    background-color: #f1f1f1;
    .introduce{
      font-size: 3.7vw;
      letter-spacing: 0.15vw;
      padding-bottom: 2vw;
    }
}
  .btn-admin-common{
    width: 22vw;
    font-size: 4vw;
    border-radius: 3vw;
    letter-spacing: 0.3vw;
  }
  .showDialog{
    // margin: ;
    width: 100%;
    height: 14vw;
     background: linear-gradient(to right, #ecb91f, #c774b8);
     span{
      padding: 0 5vw;
      display: inline-block;
      text-align: center;
      width: 100%;
      height: 10vw;
      line-height: 10vw;
     }
  }
.van-admin{
    // 渐变色
     background-image: linear-gradient(to top, rgba(223, 233, 39, 0.5) 0%, rgba(244, 216, 34, 0.5) 100%);
}
  .header-left{
  width: 47vw;
  height: 8vw;
  // background-color: red;
  display: flex;
  text-align: left;
  .icon-admin{
    width: 8vw;
    border-radius: 3vw;
    background-color:#565a62;
    text-align: center;
  }
  .context{
    width: 40vw;
    height: 100%;
    margin-left: 4vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    span{
      width: 100%;
    }
    .rate-scor{
      margin-left: 2vw;
      color: #ec3814;
      font-size: 2.8vw;
    }
  }
  }
  .header-right{
    width: 20vw;
    height: 8vw;
    .addBtn{
      background-color: red;
    }
  }
  .cneter1{
    display: flex;
    justify-content: space-around;
    margin-top: 15vw;
    .center1-lefet{
        width: 30vw;
        height: 39vw;
      img{
          width: 100%;
          height: 100%;
          background-color: pink;
          border-radius: 2vw;
      }
    }
    .center1-right{
        width: 60vw;
        .center1-name{
          font-size: 5.8vw;
          letter-spacing: 0.4vw;
        }
        .commonspan-name{
          display: inline-block;
          width: 100%;
          letter-spacing: 0.4vw;
          font-size: 3.3vw;
          color: #999;
          margin-bottom: 3vw;
        }
        .commonspan1{
          display: inline-block;
          // width: 20%;
          font-size: 3.1vw;
          color: #666;
          margin: 1vw 1.4vw;
        }
        .commonspan2{
          display: inline-block;
          width: 100%;
          font-size: 3.5vw;
          color: #666;
          padding: 0;
          letter-spacing: 0.2vw;
          margin: 1vw 0;
        }
        .center-btn{
          width: 100%;
          display: flex;
          margin-top: 1vw;
          justify-content: space-around;
        }
    }
  }
  .center2{
    margin: 0 auto;
    padding: 1vw 1vw;
    border-radius: 2vw;
    width: 91%;
    margin-top: 4vw;
    background-color: #f1f1f1;
    .center2-center{
      display: flex;
      width: 100%;
      height: 30vw;
      padding-top: 3vw;
      justify-content: space-around;
      // background-color: rgb(213, 84, 84);
      .centert-left{
        width: 30%;
        text-align: center;
        .center2-score{
          height: 15vw;
          padding-top: 3vw;
          font-size: 10vw;
          text-align: right;
        }
        .center2-people{
          height: 6vw;
          padding-top: 2vw;
          font-size: 3.6vw;
          color: #999;
          text-align: right;
        }
      }
      .center2-right{
        width: 60%;
        height: 30vw;
          .center-right-center{
            display: flex;
            justify-content: start;
            .aadmin-rate{
            width: 30%;
            text-align: right;
          }
          .admin-pro{
            width: 60%;
            margin-left: 2vw;
          }
          }
      }
    }
    .center2-foot{
      display: flex;
      margin-left: 5vw;
      padding-bottom: 3vw;
      justify-content: start;
      .foot-span{
        display: inline-block;
        width: 25vw;
        font-size: 3.8vw;
      }
    }
  }
  .center3{
    margin: 0 auto;
    padding: 3vw 3vw;
    border-radius: 2vw;
    width: 91%;
    margin-top: 4vw;
    background-color: #f1f1f1;
    .center-header{
      display: flex;
      justify-content: space-between;

    }
  }
</style>
